﻿@*The template for tool buttons (edit, delete, move up/down).*@
<script id="questionButtonsTemplate" type="text/x-jquery-tmpl">
    <span class="question-buttons">
        <button data-role='Edit' class="ui-priority-secondary" title="Edit this Question">Edit</button>
        <button data-role='Delete' class="ui-priority-secondary">Delete</button>
        <button data-role='MoveUp' class="ui-priority-secondary">Move Up</button>
        <button data-role='MoveDown' class="ui-priority-secondary">Move Down</button>
    </span>
</script>
<script type="text/javascript">
    $(function () {
        $('#questionButtonsTemplate').data('handler-load', function (tmplItem) {
            // validate input parameter(s)
            if (tmplItem == null || tmplItem.nodes.length == 0) { return; }
            if (!$(tmplItem.nodes[0]).hasClass('question-buttons')) { return; }
            // extend tmplItem
            $extendTmplItem(tmplItem);
            // initialize current template item
            var questionId = tmplItem.data;
            var root = $(tmplItem.nodes[0]);
            // get the buttons
            var btnEdit = root.children('button[data-role=Edit]');
            var btnDelete = root.children('button[data-role=Delete]');
            var btnMoveUp = root.children('button[data-role=MoveUp]');
            var btnMoveDown = root.children('button[data-role=MoveDown]');
            // apply icons
            btnEdit.button({ icons: { primary: 'ui-icon-pencil'} });
            btnDelete.button({ icons: { primary: 'ui-icon-close' }, text: false });
            btnMoveUp.button({ icons: { primary: 'ui-icon-arrowthick-1-n' }, text: false });
            btnMoveDown.button({ icons: { primary: 'ui-icon-arrowthick-1-s' }, text: false });
            if (Modernizr.canvas) {
                var btOptions = {
                    positions: ['bottom'], shrinkToFit: true,
                    cssStyles: { fontSize: '0.8em' }, padding: '6px',
                    fill: 'rgba(255, 255, 255, .8)', strokeStyle: 'rgba(0, 0, 0, .8)',
                    spikeLength: 14, spikeGirth: 12
                };
                btnEdit.bt(btOptions);
                btnDelete.bt(btOptions);
                btnMoveUp.bt(btOptions);
                btnMoveDown.bt(btOptions);
            }
            // bind events
            btnEdit.click(function () { tmplItem.trigger('edit', questionId); });
            btnDelete.click(function () { tmplItem.trigger('delete', questionId); });
            btnMoveUp.click(function () {
                tmplItem.trigger('moveUp', questionId);
                if (Modernizr.canvas) { $(this).blur().mouseout().btOff(); }
            });
            btnMoveDown.click(function () {
                tmplItem.trigger('moveDown', questionId);
                if (Modernizr.canvas) { $(this).blur().mouseout().btOff(); }
            });
        });
    });
</script>

@*The template for single-choice questions.*@
<script id="editQuestionsTemplate" type="text/x-jquery-tmpl">
    <li>
        <div class="ui-widget-header ui-corner-all handle"></div>
        <p class="title">${Title} {{tmpl(QuestionId) '#questionButtonsTemplate'}}</p>
        <p class="options">
        {{each Options}}
            <input type='radio' id='o_${QuestionId}_${$index}' name='q_${QuestionId}' ss:index='${$index}'/>
            <label for='o_${QuestionId}_${$index}'>${$value}</label>
        {{/each}}
        </p>
    </li>
</script>
<script type="text/javascript">
    $(function () {
        $('#editQuestionsTemplate').data('handler-load', function (tmplItem) {
            // validate input parameter(s)
            if (tmplItem == null || tmplItem.nodes.length == 0) { return; }
            // extend tmplItem
            $extendTmplItem(tmplItem);
            // invoke load handler of nested template(s)
            var buttonsTmplItem = $(tmplItem.nodes[0]).find('.question-buttons').tmplItem();
            var loadHandler = $('#questionButtonsTemplate').data('handler-load');
            if (typeof (loadHandler) == 'function') { loadHandler(buttonsTmplItem); }
            // initialize current template item
            $(tmplItem.nodes).children('.handle')
                .mouseover(function () { $(this).addClass('ui-state-hover'); })
                .mousemove(function () { $(this).addClass('ui-state-hover'); })
                .mouseout(function () { $(this).removeClass('ui-state-hover'); })
                .mousedown(function () { $(this).addClass('ui-state-active'); })
                .mouseup(function () { $(this).removeClass('ui-state-active'); });
            $(tmplItem.nodes).children('p.options').buttonset();
            // bind events
            buttonsTmplItem.on('edit', function (event, questionId) { tmplItem.trigger('edit', [questionId, tmplItem.data, tmplItem]); });
            buttonsTmplItem.on('delete', function (event, questionId) { tmplItem.trigger('delete', [questionId, tmplItem.data, tmplItem]); });
            buttonsTmplItem.on('moveUp', function (event, questionId) { tmplItem.trigger('moveUp', [questionId, tmplItem.data, tmplItem]); });
            buttonsTmplItem.on('moveDown', function (event, questionId) { tmplItem.trigger('moveDown', [questionId, tmplItem.data, tmplItem]); });
            tmplItem.on('update', function (event) {
                tmplItem.update();
                $('#editQuestionsTemplate').data('handler-load')(tmplItem);
            });
        });
    });
</script>

@*The template for create/edit question dialog.*@
<script id="editQuestionTemplate" type="text/x-jquery-tmpl">
    <form style="width:100%;height:100%;">
        <label for="Title" class="text">Question</label>
        <input type="text" name="Title" value="${question.Title}" class="text ui-widget-content ui-corner-all"/>
        <label for="Options" class="text">Options</label>
        <textarea name="Options" class="text ui-widget-content ui-corner-all"/>
    </form>
</script>
<script type="text/javascript">
    $(function () {
        $('#editQuestionTemplate').data('handler-load', function (tmplItem) {
            // validate input parameter(s)
            if (tmplItem == null || tmplItem.nodes.length == 0) { return; }
            // extend tmplItem
            $extendTmplItem(tmplItem);
            // initialize current template item
            var questionId = tmplItem.data.questionId;
            var question = tmplItem.data.question;
            var container = $(tmplItem.nodes[0]).parent();
            container.attr('title', 'Edit Question Information');
            var textArea = $(tmplItem.nodes[0]).find('textarea[name=Options]');
            textArea.text($writeLines(question.Options));
            // bind events
            tmplItem.on('showDialog', function (event, onSubmit) {
                container.dialog({
                    autoOpen: true, height: 400, width: 400, modal: true,
                    buttons: {
                        'Submit': function () {
                            if (typeof (onSubmit) == 'function') {
                                var root = $(tmplItem.nodes);
                                question.Title = root.find('input[name=Title]').val();
                                question.Options = $readLines(root.find('textarea[name=Options]').val());
                                onSubmit(question);
                            }
                            $(this).dialog('close');
                        },
                        'Cancel': function () { $(this).dialog('close'); }
                    },
                    close: function () { }
                });
            });
        });
    });
</script>

@*The template for single-choice questions.*@
<script id="questionsTemplate" type="text/x-jquery-tmpl">
    <p class="title">${Title}</p>
    <p class="options">
    {{each Options}}
        <input type='radio' id='o_${QuestionId}_${$index}' name='q_${QuestionId}' ss:index='${$index}'/>
        <label for='o_${QuestionId}_${$index}'>${$value}</label>
    {{/each}}
    </p>
</script>
<script type="text/javascript">
    $(function () {
        $('#questionsTemplate').data('handler-load', function (tmplItem) {
            // validate input parameter(s)
            if (tmplItem == null || tmplItem.nodes.length < 2) { return; }
            if (!$(tmplItem.nodes[1]).hasClass('options')) { return; }
            // extend tmplItem
            $extendTmplItem(tmplItem);
            // initialize current template item
            $(tmplItem.nodes[1]).buttonset();
        });
    });
</script>